<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>


    <style>

        .filePic,.fileResume {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .fileResume input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .filePic input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .filePic,.fileResume:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div style="margin: auto; width: 80%">
    <form class="layui-form layui-form-pane" action="/personal/personalInformation" enctype="multipart/form-data"
          method="post">
        <fieldset class="layui-elem-field" style="width: 80%;margin: auto;">
            <legend>人员信息</legend>
            <div class="layui-form-item" pane>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" style="width:190px;float: left" id="name" lay-verify="required"
                               lay-reqtext="请填写用户名" placeholder="请输入" autocomplete="off" class="layui-input">
                        <input type="hidden" th:value="${session.user.getPassword()}" name="staff.password" id="applicating_staff_password">
                    </div>

                    <div class="layui-input-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block" style="width:190px;float: left">
                            <input type="radio" name="sex" value="男" title="男" checked>
                            <input type="radio" name="sex" value="女" title="女" >
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">常用手机</label>
                    <div class="layui-input-inline"><!---->
                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">常用邮箱</label>
                    <div class="layui-input-inline"><!---->
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" pane>
                <div class="layui-inline" pane>
                    <label class="layui-form-label">民族</label>
                    <div class="layui-input-inline"><!---->
                        <select name="nation" lay-verify="required" id="Nation"  pane lay-search="">
                            <option value="">直接选择或搜索选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">政治面貌</label>
                    <div class="layui-input-block">
                        <input type="radio" name="politicalOutlook" value="0" checked title="群众">
                        <input type="radio" name="politicalOutlook" value="1" title="共青团员">
                        <input type="radio" name="politicalOutlook" value="2" title="中共党员">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label class="layui-form-label">学历</label>
                <div class="layui-input-block"  style="width: 10%"><!---->
                    <select name="education" lay-verify="required" >
                        <option value=""></option>
                        <option value="本科" selected="">本科</option>
                        <option value="硕士研究生" >硕士研究生</option>
                        <option value="博士研究生" >博士研究生</option>
                        <option value="博士后" >博士后</option>
                        <option value="大专">大专</option>
                        <option value="高中">高中</option>
                        <option value="初中">初中</option>
                        <option value="小学">小学</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline"><!---->
                        <input type="text" name="date" lay-verify="date" id="date"  placeholder="yyyy-MM-dd" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">家庭住址</label>
                <div class="layui-input-block"  style="width: 500px"><!---->
                    <input type="text" name="address" lay-verify="required" placeholder=""  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">身份证</label>
                <div class="layui-input-block" style="width: 500px"><!---->
                    <input type="text" name="card" lay-verify="identity"  placeholder=""  autocomplete="off" class="layui-input">
                </div>
            </div>
        </fieldset>


        <fieldset class="layui-elem-field" style="width: 80%;margin: auto;">
            <legend>入职要求信息</legend>
            <div class="layui-form-item">
                <label class="layui-form-label">工号</label>
                <div class="layui-input-inline">
                    <input type="text" id="generateJobNumber" readonly="readonly" name="jobNumber"
                            autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline"> <!--lay-verify="required" -->
                    <input type="password" name="password" lay-verify="pass"  placeholder="请填写6到12位密码" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">银行卡号</label>
                    <div class="layui-input-block" style="width: 500px"><!-- -->
                        <input type="text" name="bankCard" lay-verify="required" id="bankCardInput" placeholder="" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">紧急联系人1</label>
                    <div class="layui-input-block" style="width:100%">
                        <!-- -->
                        <!--  -->
                        <input type="text" lay-verify="required"  name="emergencyContact1" style="width:90px;float: left" placeholder="姓名"
                               autocomplete="off" class="layui-input">
                        <input type="text" lay-verify="required|phone" name="emergencyContact1Phone" style="width:190px;float: left"
                               placeholder="手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">紧急联系人2</label>
                    <div class="layui-input-block" style="width:100%">
                        <!---->
                        <!---->
                        <input type="text" lay-verify="required" name="emergencyContact2" style="width:90px;float: left"
                                placeholder="姓名" autocomplete="off" class="layui-input">
                        <input type="text" lay-verify="required|phone"  name="emergencyContact2Phone" style="width:190px;float: left"
                               placeholder="手机号"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

        </fieldset>

        <fieldset class="layui-elem-field" style="width: 80%;margin: auto;margin-top: 20px">
            <legend>所属部门职位</legend>
            <div class="layui-form-item">
                <button type="button" class="layui-btn layui-btn-sm" id="mybtnRole" style="margin-left: 25px">岗位分配</button>
            </div>
        </fieldset>

        <!---->
        <fieldset class="layui-elem-field" style="width: 80%;margin: auto;">
            <legend>文件附加信息</legend>
            <div class="layui-form-item">
                <a href="javascript:" class="filePic">提交照片
                    <input type="file" name="Unchangedphone"  lay-verify="required" class="invoice"/>
                </a>
                <span class="showFileNamePic"></span>
                <div>
                    <img style="height:150px;" src=""  class="newimage"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <a href="javascript:" class="fileResume">提交简历文件
                        <input type="file" lay-verify="required" name="Unchangedresume" class="ruseme"/>
                    </a>
                    <span class="showFileNameResume"></span>
                </div>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field" style="width: 80%;margin: auto;">
            <legend>入职备注</legend>
            <div class="layui-form-item layui-form-text">
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容"  class="layui-textarea" style="height: 100%"></textarea>
                </div>
            </div>
        </fieldset>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" id="demotijiao" lay-filter="demo1">立即提交</button>
                <div class="layui-form-mid layui-word-aux">验证密码成功后，再次点击提交</div>
                <button type="reset" class="layui-btn layui-btn-primary">重置内容</button>
            </div>
        </div>
    </form>
</div>
<script src="/layui/jquery-3.5.1.min.js" charset="utf-8"></script>
<!--动态加载role-->
<script type="text/html" id="Roles">
    <option value="">直接选择或搜索选择</option>
    <option
            th:each="role : ${roles}"
            th:value="${role.id}"
            th:text="${role.name} ">
    </option>
</script>



<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript">
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            var $ = layui.jquery
            , laydate = layui.laydate;
        //部门和职位
        var addRole = 0;
        layui.$('.layui-btn-sm').on('click', function () {
            var addRoleDeptPost = $("<div class=\"layui-inline\">" +
                "                 <label class=\"layui-form-label\">所属部门</label>\n" +
                "                 <div class=\"layui-input-inline\">\n" +
                "                   <select class=\"accompanying_staffRole\" lay-verify=\"required\" lay-search=\"\">" +
                "                   </select>\n" +
                "                 </div>\n" +
                "                 <a class=\"layui-btn layui-btn-primary layui-btn-radius layui-btn-xs delmember\" lay-event=\"del\"> X </a>\n" +
                "              </div>");
            addRoleDeptPost.find("select").html($("#Roles").html());
            addRoleDeptPost.find("select").attr("name", "staffRoles");
            $(addRoleDeptPost).insertBefore($("#mybtnRole"));
            form.render('select');
            addRole++;
        });

        //删除随行人员
        layui.$("body").on("click",".delmember", function () {
            $(this).parent().remove();
        });
        //文件名称显示
        $(".layui-form").on("change","input[type='file']",function(){
            //alert(123);
            var filePic=$(".invoice").val();
            var fileResume=$(".ruseme").val();

            var arr=filePic.split('\\');
            var pic=arr[arr.length-1];

            var arrs=fileResume.split('\\');
            var resume=arrs[arrs.length-1];

                $(".showFileNamePic").html(pic);
                $(".showFileNameResume").html(resume);
                form.render();
        })


        // 生成工号
        layui.$(function () {
            $.ajax({
                //提交数据的类型 POST GET
                type: "POST",
                //提交的网址
                url: "/personal/requestJobNumber",
                //成功返回之后调用的函数
                success: function (data) {
                    $("#generateJobNumber").val(data.jobNumber);
                    //alert($("#generateJobNumber").val());
                    form.render();
                }, error: function () {
                    alert("生成工号失败失败！！！")
                }
            });
        });
        //查询民族
        layui.$(function () {
            $.ajax({
                //提交数据的类型 POST GET
                type: "POST",
                //提交的网址
                url: "/personal/requestJobNumber",
                //成功返回之后调用的函数
                success: function (data) {
                    // alert(data.nation)
                    for (var i = 0; i < data.nation.length; i++) {
                        var options = $("<option value=" + data.nation[i].name + ">" + data.nation[i].name + "</option>");
                        $("#Nation").append(options);
                    }
                    form.render();
                }, error: function () {
                    alert("查询民族失败！！！")
                }
            });
        });

        /** 监控input改变:银行卡号*/
        $("#bankCardInput").on("input", function (e) {
            var oldVal = e.delegateTarget.value;
            var newVal = oldVal.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
            $("#bankCardInput").val(newVal);
        });

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });
        //判断重复职位
        function rolePost(){
            var array = [];
            var roles = true;
            $(".accompanying_staffRole").each(function () {
                if (array.includes($(this).val())){
                    layer.msg("不允许重复职位");
                    roles=false;
                }
                array.push($(this).val());
            })
           // alert("return===role==="+roles);
            return roles;
        }
        //监听提交
        var verification=false;
        form.on('submit(demo1)', function (data) {
            var password=$("#applicating_staff_password").val();
            var roles=rolePost();
            if(roles){
                layer.prompt({title: '输入密码，并确认', formType: 1}, function (pass, index) {
                    if (pass ==password) {
                        layer.close(index);
                        verification = true;
                    } else {
                        layer.msg('密码验证错误....');
                        verification = false;
                    }
                });
            }
            //alert("后========="+verification);
            return verification;
        });

        //图片预览
        $(".layui-form").on("change", ".invoice", function () {
            var objUrl = getObjectURL(this.files[0]);
            //console.log("objUrl = "+objUrl) ;
            $(this).parent().parent().parent().find(".newimage").attr("src", objUrl);
            form.render();
        });

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            form.render();
            return url;

        }


    });
</script>
</body>
</html>